<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="24" >
            <a-form-model-item  :label="$t('columns.carType')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="carTypeName">
              <EBikeTypeDialog v-model="model.carTypeName" :id.sync="model.carTypeId"></EBikeTypeDialog>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item :label="$t('columns.customCode')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="customCode">
              <a-input v-model="model.customCode" :placeholder="$t('common.form.rule.input', {label: $t('columns.customCode')})"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item :label="$t('columns.plate')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="plate">
              <a-input v-model="model.plate" :placeholder="$t('common.form.rule.input', {label: $t('columns.plate')})"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item :label="$t('columns.carCode')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="carCode">
              <a-input v-model="model.carCode" :placeholder="$t('common.form.rule.input', {label: $t('columns.carCode')})"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item :label="$t('columns.phone')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="phone">
              <a-input v-model="model.phone" :placeholder="$t('common.form.rule.input', {label: $t('columns.phone')})" ></a-input>
            </a-form-model-item>
          </a-col> <a-col :span="24">
            <a-form-model-item :label="$t('columns.iccid')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="iccid">
              <a-input v-model="model.iccid" :placeholder="$t('common.form.rule.input', {label: $t('columns.iccid')})" ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item :label="$t('columns.frameCode')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="frameCode">
              <a-input v-model="model.frameCode" :placeholder="$t('common.form.rule.input', {label: $t('columns.frameCode')})" ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item :label="$t('columns.emotorCode')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="emotorCode">
              <a-input v-model="model.emotorCode" :placeholder="$t('common.form.rule.input', {label: $t('columns.emotorCode')})"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item :label="$t('columns.ctrlCode')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="ctrlCode">
              <a-input v-model="model.ctrlCode" :placeholder="$t('common.form.rule.input', {label: $t('columns.ctrlCode')})" ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item :label="$t('columns.dashboardCode')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="dashboardCode">
              <a-input v-model="model.dashboardCode" :placeholder="$t('common.form.rule.input', {label: $t('columns.dashboardCode')})" ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item :label="$t('columns.bmsCode')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="bmsCode">
              <a-input v-model="model.bmsCode" :placeholder="$t('common.form.rule.input', {label: $t('columns.bmsCode')})" ></a-input>
            </a-form-model-item>
          </a-col>
          <!-- <a-col :span="24">
            <a-form-model-item label="制造商编码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="manufacturerId">
              <a-input v-model="model.manufacturerId" placeholder="请输入制造商编码"  ></a-input>
            </a-form-model-item>
          </a-col> -->

          <!-- <a-col :span="24">
            <a-form-model-item label="终端类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="terminalType">
              <a-input v-model="model.terminalType" placeholder="请输入终端类型"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="终端编号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="terminalId">
              <a-input v-model="model.terminalId" placeholder="请输入终端类型"  ></a-input>
            </a-form-model-item>
          </a-col> -->

          <a-col :span="24">
            <a-form-model-item :label="$t('columns.blueCode')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="blueCode">
              <a-input v-model="model.blueCode" :placeholder="$t('common.form.rule.input', {label: $t('columns.blueCode')})"  ></a-input>
            </a-form-model-item>
          </a-col>

          <a-col :span="24">
            <a-form-model-item :label="$t('columns.blueKey')"  :labelCol="labelCol" :wrapperCol="wrapperCol" prop="blueKey">
              <a-input v-model="model.blueKey" :placeholder="$t('common.form.rule.input', {label: $t('columns.blueKey')})"  ></a-input>
            </a-form-model-item>
          </a-col>
        </a-row>

        <!-- <ControllerSettings  :carId="model.id" style="width: 800px;" /> -->
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<i18n>
  {
    "zh-CN": {
      "columns": {
        "carType":"车辆类型",
        "plate": "车牌编号",
        "customCode": "自编号",
        "carCode": "终端IMEI",
        "phone": "终端SN",
        "iccid": "iccid",
        "frameCode": "车架编号",
        "emotorCode": "电机编号",
        "ctrlCode": "控制器编号",
        "dashboardCode": "仪表盘编号",
        "bmsCode": "电池编号",
        "blueCode": "蓝牙识别码",
        "blueKey": "蓝牙秘钥",
        "manufacturerId": "制造商编码",
        "fenceId": "电子围栏",
        "onlineStatus": "在线状态",
        "bindLicensePlate": "绑定车牌"
      }
    },
    "en-US": {
      "columns": {
        "carType":"Types of electric bicycles",
        "plate": "License plate number",
        "customCode": "Self Number",
        "carCode": "Terminal IMEI",
        "phone": "Terminal SN",
        "iccid": "iccid",
        "frameCode": "Frame Number",
        "emotorCode": "Motor Number",
        "ctrlCode": "Controller Number",
        "dashboardCode": "Dashboard Number",
        "bmsCode": "Battery Number",
        "blueCode": "Bluetooth identification code",
        "blueKey": "Bluetooth Key",
        "manufacturerId": "Manufacturer code",
        "fenceId": "Electronic Fence",
        "onlineStatus": "Presence",
        "bindLicensePlate": "Bind license plate"
      }
    },
    "fr-FR": {
      "columns": {
        "carType":"Type de vélo électrique",
        "plate": "Numéro de plaque d'immatriculation",
        "customCode": "Auto - numéro",
        "carCode": "Terminal IMEI",
        "phone": "Terminal SN",
        "iccid": "iccid",
        "frameCode": "Numéro de cadre",
        "emotorCode": "Numéro de moteur",
        "ctrlCode": "Numéro du Contrôleur",
        "dashboardCode": "Numéro du tableau de bord",
        "bmsCode": "Numéro de batterie",
        "blueCode": "Code d'identification Bluetooth",
        "blueKey": "Clé secrète Bluetooth",
        "manufacturerId": "Code du fabricant",
        "fenceId": "Clôture électronique",
        "onlineStatus": "Présence",
        "bindLicensePlate": "Plaque d'immatriculation liée"
      }
    }
  }
</i18n>

<script>

  import { httpAction, getAction } from '@/api/manage'
  import { validateDuplicateValue } from '@/utils/util'
  import EBikeTypeDialog from '@/components/rental/dialog/EBikeTypeDialog.vue'
  import StoreDialog from '@/components/rental/dialog/storeDialog.vue'
  import ControllerSettings from './ControllerSettings.vue';
  export default {
    name: 'RentalCarForm',
    components: {
      EBikeTypeDialog,
      StoreDialog,
      ControllerSettings
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        model:{

         },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        typelistdata:[],
        confirmLoading: false,
        validatorRules: {
          phone: [
            // { required: true, message: '请输入中控手机号', trigger: 'blur' },
            { pattern: /^\d{12}$/, message: '手机号必须为12位数字', trigger: 'blur' },
          ],
          // carCode:{required: true, message: '请输入车辆码', trigger: 'blur'},
          meshPointName:{required: true, message: '请选择网点', trigger: 'blur'},
          // terminalType:{ validator: this.validateTerminalModel, trigger: 'blur' }
        },
        datasslist:[],
        url: {
          add: "/rental/ebike/add",
          edit: "/rental/ebike/edit",
          queryById: "/rental/ebike/queryById",
          chargeMeshPointlist:"/rental/store/list",
          typelist:"/rental/ebike-type/list",
          queryControl:"/equ/queryControl"
        }
      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
    },
    created () {
       //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
      this.getchargeMeshPointlist();
      this.gettypelist();
    },
    methods: {
      add () {
        this.edit(this.modelDefault);
      },
      edit (record) {
        console.log("edit:", record);
        this.model = Object.assign({}, record);
        this.visible = true;
      },
      validateTerminalModel(rule, value, callback) {
        const byteLength = new Blob([value]).size;
        if (byteLength > 20) {
          callback(new Error('终端型号过长'));
        } else {
          callback();
        }
      },

      queryController() {
        const terminalId = this.model.carCode; // Get terminalId from carCode

        this.confirmLoading = true; // Show loading indicator

        httpAction(this.url.queryControl+`?terminalId=${terminalId}`, {}, 'get')
          .then((res) => {
            if (res.success) {
              this.$message.success("查询控制器成功");
              // Handle the response data (res.result) here.
              // For example, you might update a data property to display the controller information.
            } else {
              this.$message.warning(res.message);
            }
          })
          .catch((error) => {
            this.$message.error("查询控制器失败：" + error);
          })
          .finally(() => {
            this.confirmLoading = false; // Hide loading indicator
          });
      },
      /*gettypelist(){
        let that=this;
        httpAction(this.url.typelist,{pageSize:100,pageNo:1},'get').then((res)=>{
          let datass=[]
          res.result.records.forEach(itme=>{
            datass.push({name:itme.carTypeName,id:itme.id})
          })
          this.typelistdata=datass

        }).finally(() => {

        })
      },*/

      gettypelist(){
        let that=this;
        let data={pageSize:100,pageNo:1}
        getAction(this.url.typelist,data).then((res)=>{
          let datass=[]
          res.result.records.forEach(itme=>{
            datass.push({name:itme.carTypeName,id:itme.id})
          })
          this.typelistdata=datass;
          console.log(datass)
        }).finally(() => {

        })
      },
      getchargeMeshPointlist(){
        let that=this;
        let data={pageSize:100,pageNo:1}
        getAction(this.url.chargeMeshPointlist,data).then((res)=>{
          let datass=[]
          res.result.records.forEach(itme=>{
            datass.push({name:itme.meshPointsName,id:itme.id})
          })
          this.datasslist=datass;
        }).finally(() => {

        })
      },
      submitForm () {
        const that = this;
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if(!this.model.id){
              httpurl+=this.url.add;
              method = 'post';
            }else{
              httpurl+=this.url.edit;
               method = 'put';
            }
            httpAction(httpurl,this.model,method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
            })
          }
         
        })
      },

      setControl () {
        const that = this;
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if(!this.model.id){
              httpurl+=this.url.add;
              method = 'post';
            }else{
              httpurl+=this.url.edit;
              method = 'put';
            }
            httpAction(httpurl,this.model,method).then((res)=>{
              if(res.success){

              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
            })
          }

        })
      },
    }
  }
</script>